<template>
<div>
  <section class="container">
  <div class="row">
    <div class="col-md-5">
      <form @submit.prevent="editDataById(fromData.id)">
        <div class="form-group">
          <label for="exampleInputEmail1">选择板块</label>
          <h2>修改话题</h2>
        </div>
        <div class="form-group">
          <label for="exampleInputEmail1">标题</label>
          <input type="text" v-model="fromData.title" class="form-control" id="exampleInputEmail1" required>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">内容</label>
          <textarea class="form-control" v-model="fromData.content"  rows="3"></textarea>
        </div>
        <button type="submit" class="btn btn-default">保存修改</button>
      </form>
    </div>
  </div>
</section>
</div>


</template>

<script>
  import AppHeader from '../home/Header.vue'
  import axios from 'axios'
  export default {
    data () {
      return {
        fromData: {
        }
      }
    },
    created () {
        this.dataShow(this.$route.params.id)
    },
    methods: {
      async dataShow (id) {
        try {
          const {data: topics} = await axios.get(`/api/topics/${id}`)
          this.fromData = topics
        } catch(e) {
          console.log(e)
        }
      },
      async editDataById (id) {
        try {
          const {title, content} = this.fromData
          await axios.patch(`/api/topics/${id}`,{title, content})
          this.$router.back()
        } catch(e) {
          console.log(e)
        }
      }
    }
  }
</script>